<template>
    <div>
        <van-field
                readonly
                v-model="selected"
                :name="name"
                :required="required"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <div :id="containerId" style="width: 100%" class="user-select-ty"></div>
        <van-popup v-model="show" bind:close="onClose" :get-container="getContainer">
            <select-departs ref="selectRef" @back="()=>show=false" @ok="getSelectedValue"></select-departs>
        </van-popup>
    </div>
</template>

<script>

  import SelectDeparts from '@/components/SelectDeparts'
  import { getAction } from "@/api";

  export default {
    name: "AppDepartSelect",
    components:{
      SelectDeparts
    },
    props:{
      display:{
        type:String,
        default:'inline-block',
        required:false
      },
      name:{
        type:String,
        default:'',
        required:false
      },
      required:{
        type:Boolean,
        default:false,
        required:false
      },
      label:{
        type:String,
        default:'',
        required:false
      },
      placeholder:{
        type:String,
        default:'请选择',
        required:false
      },
      border:{
        type:Boolean,
        default:false,
        required:false
      },
      value:{
        type:String,
        required:false
      }
    },
    data(){
      return {
        selected:'',
        containerId:'',
        show:false
      }
    },
    watch:{
      value:{
        handler(val){
          if(val && val.length>0){
            if(this.$refs.selectRef){
              //this.selected = this.$refs.selectRef.getSelectValue(val);
              console.log('值存在切换')
            }else{
              this.loadItem()
            }
          }
        }
      }
    },
    created(){
      this.initContainerId();
      this.loadItem()
    },
    computed:{
      selectRule(){
        if(this.required===true){
          return [{ required: true, message: `请选择${this.label}`}]
        }else{
          return [];
        }
      }
    },
    methods:{
      openSelection(){
        this.show = true
        this.$nextTick(()=>{
          this.$refs.selectRef.clearAll(this.value)
        })
      },
      onClose(){
        this.show = false;
      },
      initContainerId(){
        this.containerId = 'msty'+new Date().getTime();
      },
      getContainer(){
        return document.getElementById(this.containerId)
      },
      getSelectedValue(list){
        let arr1 = [];
        let arr2 = [];
        for(let item of list){
          arr2.push(item.departName);
          arr1.push(item.id);
        }
        this.selected = arr2.join(',');
        this.$emit('change',arr1.join(','));
        this.show = false
      },
      loadItem(){
        if(this.value && this.value.length>0){
          let url = '/sys/sysDepart/listAll';
          getAction(url,{id:this.value}).then(res=>{
            if(res.success){
              let arr = [];
              for(let item of res.result){
                arr.push(item.departName);
              }
              this.selected = arr.join(',');
            }
          })
        }

      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }

  }
</script>

<style>
    .user-select-ty .van-popup{width:100%;height: 100%;}
</style>